<template lang="html">
  <div class="tabs">
    <ul class="tab">
      <li class="li-tab" v-for="(item,index) in tabsParam"
          @click="toggleTabs(index)"
          :class="{active:index===nowIndex, brLfet:nowIndex===1,brRight:nowIndex===0 }">{{item}}</li>
    </ul>
    <div class="divTab fanTab" v-show="nowIndex===0 && join">
      <p>我累计获得返现<label >{{money}}</label>元</p>
      <div class="bodyT">
        <div>我的投资</div>
        <div>返现金额</div>
        <div>时间</div>
      </div>
      <ul class="fanTabList">
        <li v-for="item in myInfo.list" >
          <span>{{item.order_investment}}</span>
          <span>{{item.product_id}}</span>
          <span>{{item.create_time}}</span>
        </li>
      </ul>
    </div>
    <div class="divTab paiTab" v-show="nowIndex===1 && totalData.count !==0" >
      <div class="paiTabTop">
        <p>累计<label >{{totalData.count}}</label>名财主，共获得<label >{{totalData.sum}}</label>元返现</p>
        <p v-if="ranking != 1 && join">您与第一名的差距只有<label >{{ranking-1}}</label>名，继续努力！</p>
        <p v-if="ranking == 1 && join">恭喜您！目前排名第一，加油！</p>
      </div>
      <div class="bodyT">
        <div>排名</div>
        <div>财主</div>
        <div>累计返现(元)</div>
        <div>瓜分现金(元)</div>
      </div>
      <ul class="paiTabList" :class="{paiTabListOne:!join}">
        <li v-if="join">
          <span>{{myInfo.myRank.rank }}</span>
          <span>{{myInfo.myRank.tel }}</span>
          <span>{{myInfo.myRank.money}}</span>
          <span>{{myInfo.myRank.divide_money}}</span>
        </li>
        <li v-for="(item, index) in rank" v-if="rank.length!=0">
          <span>{{index + 1 }}</span>
          <span>{{item.tel}}</span>
          <span>{{item.money}}</span>
          <span>{{item.divide_money}}</span>
        </li>
      </ul>

    </div>
    <div class="divTab nullTbas" v-show="!join && nowIndex===0">
      <p>亲爱的财主 </p>
      <p>您还没得到返现哦~</p>
      <p>快参与进来吧！</p>
    </div>
  </div>
</template>

<script>

  // 引入详情页
  export default {
    props:{
      myRank:Object,
      myInfo: {
        type: Object,
        default: function () { return {} },
      },
      rank: {
        type: Array,
        default: function () { return [] },
      },
      totalData: {
        type: Object,
        default: function () { return {} },
      },
      join: {
        type: Boolean,
        default: false,
      },
      ranking: Number,
      money: String
    },
    data () {
      return {
        tabsParam: ['我的返现','排行榜'],//（这个也可以用对象key，value来实现）
        nowIndex: 1,//默认第一个tab为激活状态
        count: 0,

      }
    },
    computed: {
//      rankM: function () {
//        return this.myInfo.myRank.rank
//      }
    },
    methods:{
      toggleTabs:function(index){
        this.nowIndex=index;
      },
    },
    mounted() {

    },
    // 注册组件
    components: {
    }

  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .tabs
    /*height 6.34rem*/
    margin 0 .3rem
    border-radius 0.08rem
    background-color #fdf0dd
    .tab
      width 100%
      height 1.2rem
      font 0
      padding 0
      border-radius 0.08rem
      /*display flex*/
      /*text-align center*/
      li
        background #fad498
        color #cf8664
      .li-tab
        /*flex 1*/
        display inline-block
        width 50%
        height 100%
        text-align center
        font-size 0.54rem
        line-height 1.2rem
        color #865d32
      li.active
        background #fdf0dd
        color #865d32
      li.brLfet
        border-radius 0.08rem 0 0 0
      li.brRight
        border-radius 0 0.08rem 0 0
      li.active.brLfet
        border-radius 0 0.08rem 0 0
      li.active.brRight
        border-radius  0.08rem 0 0 0
    .divTab
      padding 0 .56rem
    .nullTbas
      height 3.36rem
      padding-top 3.3rem
      font-size .3733rem
      line-height .6666rem
      text-align center
      background url("./assets/rmb_icon.png") no-repeat center 1.04rem
      color #a98864
    .fanTab
      padding-bottom 0.48rem
      background-color #fdf0dd
      &>p
        width 5.3rem
        margin 0 auto
        text-indent .8rem
        font-size .4rem
        line-height 1.55rem
        background url("./assets/qiand.png") no-repeat left center
        color #a88866
        label
          font-size .48rem
          color red
      .bodyT
        display box			  /* OLD - Android 4.4- */
        display -webkit-box
        display flex
        display -webkit-flex
        justify-content space-between
        -webkit-justify-content: space-between;
        padding 0 .3rem
        margin-bottom 0.2666rem
        border-radius .08rem
        line-height 0.72rem
        font-size .3733rem
        background-color #fbe4c1
        color #986c3b
        text-align center
        div:nth-child(1)
          flex 1
          -webkit-flex 1
        div:nth-child(2)
          flex 1
          -webkit-flex 1
        div:nth-child(3)
          text-indent 0.28rem
          flex 1
          -webkit-flex 1
      .fanTabList
        li
          display box			  /* OLD - Android 4.4- */
          display -webkit-box
          display flex
          display -webkit-flex
          justify-content space-between
          -webkit-justify-content: space-between;
          font-size 0.3466rem
          line-height .82666rem
          color #a98864
          text-align center
          span:nth-child(1)
            flex 1
            -webkit-flex 1
          span:nth-child(2)
            flex 1
            -webkit-flex 1
          span:nth-child(3)
            flex 1
            -webkit-flex 1
    .paiTab
      padding 0 0.12rem
      .paiTabTop
        padding-top 0.48rem
        padding-bottom .36rem
        &>p
          text-align center
          font-size .4rem
          line-height .64rem
          color #a88866
          label
            font-size .48rem
            color red
      .bodyT
        display box			  /* OLD - Android 4.4- */
        display -webkit-box
        display flex
        display -webkit-flex
        justify-content space-between
        -webkit-justify-content: space-between;
        padding 0 .1rem
        margin-bottom 0.2666rem
        border-radius .08rem
        line-height 0.72rem
        font-size .3733rem
        background-color #fbe4c1
        color #986c3b
        text-align center
        div:nth-child(1)
          width 1rem
        div:nth-child(2)
          flex 1.2
          -webkit-flex 1.2
        div:nth-child(3)
          flex 1
          -webkit-flex 1
        div:nth-child(4)
          flex 1
          -webkit-flex 1
      .paiTabList
        padding-top 0.2rem
        padding-bottom 0.56rem
        li
          display box			  /* OLD - Android 4.4- */
          display -webkit-box
          display flex
          display -webkit-flex
          justify-content space-between
          -webkit-justify-content: space-between;
          font-size 0.3466rem
          line-height .82666rem
          color #a98864
          text-align center
          span:nth-child(1)
            width 1rem
          span:nth-child(2)
            flex 1.2
            -webkit-flex 1.2
          span:nth-child(3)
            flex 1
            -webkit-flex 1
          span:nth-child(4)
            flex 1
            -webkit-flex 1
        li:nth-child(1)
          color #da2a2c
      .paiTabList.paiTabListOne
        li
          color #a98864
</style>
